$(document).ready(function() {
    // 语速滑块变化处理
    $('#speed-input').on('input', function() {
        $('#speed-value').text($(this).val());
    });
    
    // 转换按钮点击处理
    $('#convert-btn').on('click', function() {
        const text = $('#text-input').val().trim();
        const voice = $('#voice-select').val();
        const language = $('#language-select').val();
        const speed = parseFloat($('#speed-input').val());
        
        if (!text) {
            alert('请输入要转换的文本！');
            return;
        }
        
        // 显示加载状态
        $('#loading').show();
        $('#error-message').hide();
        $('#success-message').hide();
        
        // 发送API请求
        $.ajax({
            url: '/api/tts',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                text: text,
                voice: voice,
                language: language,
                speed: speed
            }),
            xhrFields: {
                responseType: 'blob'
            },
            success: function(data, textStatus, xhr) {
                // 隐藏加载状态
                $('#loading').hide();
                
                // 创建音频URL
                const audioUrl = URL.createObjectURL(data);
                
                // 设置音频播放器和下载链接
                $('#audio-player').attr('src', audioUrl);
                $('#download-link').attr('href', audioUrl);
                
                // 设置下载文件名
                const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
                $('#download-link').attr('download', `tts_${timestamp}.wav`);
                
                // 显示成功信息
                $('#success-message').show();
                
                // 刷新历史记录
                loadHistory();
            },
            error: function(xhr, textStatus, errorThrown) {
                // 隐藏加载状态
                $('#loading').hide();
                
                // 显示错误信息
                let errorMessage = '转换失败，请稍后重试';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                }
                $('#error-message').text(errorMessage).show();
            }
        });
    });
    
    // 清空按钮点击处理
    $('#clear-btn').on('click', function() {
        $('#text-input').val('');
        $('#error-message').hide();
        $('#success-message').hide();
        $('#audio-player').attr('src', '');
    });
    
    // 刷新历史记录按钮点击处理
    $('#refresh-history').on('click', function() {
        loadHistory();
    });
    
    // 加载历史记录函数
    function loadHistory() {
        $.ajax({
            url: '/api/history',
            type: 'GET',
            success: function(data) {
                const historyList = $('#history-list');
                historyList.empty();
                
                if (data.length === 0) {
                    historyList.append('<p class="no-history">暂无转换历史</p>');
                    return;
                }
                
                // 遍历历史记录并添加到列表
                data.forEach(function(record) {
                    const historyItem = $('<div class="history-item"></div>');
                    historyItem.append(`<div class="history-item-text">${record.text}</div>`);
                    historyItem.append(`<div class="history-item-meta">
                        语音: ${record.voice} | 
                        语速: ${record.speed} | 
                        耗时: ${record.duration.toFixed(2)}秒 | 
                        时间: ${record.timestamp}
                    </div>`);
                    
                    historyList.append(historyItem);
                });
            },
            error: function(xhr, textStatus, errorThrown) {
                console.error('加载历史记录失败:', errorThrown);
                $('#history-list').html('<p class="error">加载历史记录失败</p>');
            }
        });
    }
    
    // 页面加载时加载历史记录
    loadHistory();
});